<!-- 🎨 默认PWA图标生成器 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精英杂志 - PWA图标生成</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 600px;
        }
        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 28px;
        }
        .subtitle {
            color: #666;
            margin-bottom: 30px;
            font-size: 16px;
        }
        .icon-preview {
            margin: 30px 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
        }
        .icon-box {
            text-align: center;
        }
        .icon {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #1e3a8f, #3b82f6);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 48px;
            font-weight: bold;
            box-shadow: 0 8px 16px rgba(30, 58, 143, 0.3);
            margin: 0 auto 10px;
        }
        .icon-small {
            width: 50px;
            height: 50px;
            font-size: 24px;
            border-radius: 12px;
        }
        .icon-tiny {
            width: 32px;
            height: 32px;
            font-size: 16px;
            border-radius: 8px;
        }
        .size-label {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        .generate-btn {
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }
        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
        }
        .status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            font-size: 14px;
        }
        .success {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #a7f3d0;
        }
        .info {
            background: #dbeafe;
            color: #1e40af;
            border: 1px solid #bfdbfe;
        }
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📱 精英杂志 PWA图标</h1>
        <p class="subtitle">正在生成默认图标，用于App安装和展示</p>
        
        <div class="icon-preview">
            <div class="icon-box">
                <div class="icon">📖</div>
                <div class="size-label">192x192</div>
            </div>
            <div class="icon-box">
                <div class="icon icon-small">📖</div>
                <div class="size-label">96x96</div>
            </div>
            <div class="icon-box">
                <div class="icon icon-tiny">📖</div>
                <div class="size-label">72x72</div>
            </div>
        </div>

        <button class="generate-btn" onclick="generateIcons()">🎨 生成所有尺寸图标</button>
        
        <div id="status" class="status info" style="display: none;">
            正在生成图标...
        </div>

        <div class="icon-grid" id="iconGrid" style="display: none;">
            <!-- 生成的图标将显示在这里 -->
        </div>
    </div>

    <script>
        // 🎨 生成图标
        function generateIcons() {
            const status = document.getElementById('status');
            const iconGrid = document.getElementById('iconGrid');
            
            status.style.display = 'block';
            status.className = 'status info';
            status.innerHTML = '🎨 正在生成图标...';
            
            iconGrid.style.display = 'none';
            
            // 模拟生成过程
            setTimeout(() => {
                const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
                const icons = [];
                
                sizes.forEach(size => {
                    icons.push({
                        size: size,
                        url: generateIconDataUrl(size),
                        filename: `icon-${size}x${size}.png`
                    });
                });
                
                // 显示生成的图标
                iconGrid.innerHTML = '';
                icons.forEach(icon => {
                    const iconElement = document.createElement('div');
                    iconElement.className = 'icon-box';
                    iconElement.innerHTML = `
                        <img src="${icon.url}" alt="${icon.filename}" style="width: 60px; height: 60px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                        <div class="size-label">${icon.size}x${icon.size}</div>
                    `;
                    iconGrid.appendChild(iconElement);
                });
                
                status.className = 'status success';
                status.innerHTML = '✅ 图标生成完成！所有尺寸的图标已准备就绪';
                iconGrid.style.display = 'grid';
                
                // 模拟下载
                console.log('📱 生成的图标尺寸:', sizes);
                console.log('📁 图标保存位置: /static/images/icons/');
                
            }, 2000);
        }
        
        // 🎨 生成图标数据URL（模拟）
        function generateIconDataUrl(size) {
            const canvas = document.createElement('canvas');
            canvas.width = size;
            canvas.height = size;
            const ctx = canvas.getContext('2d');
            
            // 绘制背景渐变
            const gradient = ctx.createLinearGradient(0, 0, size, size);
            gradient.addColorStop(0, '#1e3a8f');
            gradient.addColorStop(1, '#3b82f6');
            
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, size, size);
            
            // 绘制圆角
            const cornerRadius = size * 0.15;
            ctx.globalCompositeOperation = 'destination-in';
            ctx.beginPath();
            ctx.roundRect(0, 0, size, size, cornerRadius);
            ctx.fill();
            
            // 绘制文字
            ctx.globalCompositeOperation = 'source-over';
            ctx.fillStyle = 'white';
            ctx.font = `bold ${size * 0.4}px Arial`;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('📖', size / 2, size / 2);
            
            return canvas.toDataURL('image/png');
        }
        
        // 🚀 页面加载完成
        window.addEventListener('load', () => {
            console.log('🎨 PWA图标生成器已加载');
            console.log('📱 支持生成的图标尺寸: 72, 96, 128, 144, 152, 192, 384, 512');
        });
    </script>
</body>
</html>